<template>
  <div>
    <div style="margin: 0 auto"></div>
    <div id="header-background">
      <div id="header">
        <div id="logo">
          <a href="/">mafeifei</a>
        </div>
        <div id="nav">
          <ul id="navigation">
            <li v-for="(item, i) in menu" @click="onClick(i)" :key="i">
              <span :class="index === i ? 'active' : ''">{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { title: "主页", path: "/" },
        { title: "博客", path: "/" },
        { title: "消息", path: "/" },
        { title: "论坛", path: "/" },
        { title: "鸡舍", path: "/henhouse" },
        { title: "关于", path: "/" },
      ],
      index: 0,
    };
  },
  methods: {
    onClick(index) {
      this.index = index;
      if (this.menu[index].path === this.$route.fullPath) return;
      this.$router.push(this.menu[index].path);
    },
  },
  mounted() {
    let path = this.$route.fullPath;
    let index = this.menu.findIndex((item) => item.path === path);
    this.index = index;
  },
};
</script>

<style>
@import url("http://demo.kangjingept.com:8020/cssthemes1/ftmp_43/style.css");
#direction {
  right: 0%;
}
#navigation span {
  color: #c6c6c6;
  text-decoration: none;
  padding: 12px;
  outline: none;
  cursor: pointer;
}
#navigation .active {
  padding: 12px;
  background: #272f38;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -khtml-border-radius: 7px;
  -moz-box-shadow: inset 0 0 9px 9px #1f262d;
  -webkit-box-shadow: inset 0 0 9px 9px#1f262d;
  box-shadow: inset 0 0 9px 9px #1f262d;
}
</style>